/**
 * Message 消息提示组件
 * 提供全局的消息提示功能，支持多种类型和位置
 */

// Message 组件实例
let messageInstance = null

// 默认配置
const defaultOptions = {
  type: 'info', // 消息类型：info, success, warning, error
  message: '', // 消息内容
  duration: 3000, // 显示时长（毫秒）
  showClose: false, // 是否显示关闭按钮
  position: 'top', // 显示位置：top, center, bottom
  onClose: null, // 关闭回调
}

// Message 组件类
class MessageComponent {
  constructor() {
    this.queue = [] // 消息队列
    this.container = null // 容器元素
    this.init()
  }

  // 初始化
  init() {
    // 创建容器
    this.createContainer()
  }

  // 创建消息容器
  createContainer() {
    this.container = document.createElement('div')
    this.container.className = 'xyMessageContainer'
    document.body.appendChild(this.container)

    // 动态添加样式
    this.addStyles()
  }

  // 添加样式
  addStyles() {
    // 创建 style 标签并添加 CSS Modules 样式
    const style = document.createElement('style')
    style.textContent = `
      .xyMessageContainer {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 9999;
      }

      .xyMessage {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        padding: 12px 20px;
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        font-size: 14px;
        line-height: 1.5;
        pointer-events: auto;
        transition: all 0.3s ease;
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
      }

      .xyMessageShow {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }

      .xyMessageHide {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
      }

      /* 位置样式 */
      .xyMessageTop {
        top: 20px;
      }

      .xyMessageCenter {
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
      }

      .xyMessageCenter.xyMessageShow {
        transform: translateX(-50%) translateY(-50%);
      }

      .xyMessageCenter.xyMessageHide {
        transform: translateX(-50%) translateY(-60%);
      }

      .xyMessageBottom {
        bottom: 20px;
        top: auto;
      }

      .xyMessageBottom.xyMessageShow {
        transform: translateX(-50%) translateY(0);
      }

      .xyMessageBottom.xyMessageHide {
        transform: translateX(-50%) translateY(20px);
      }

      /* 消息类型样式 */
      .xyMessageInfo {
        background-color: #e7f3ff;
        border: 1px solid #91d5ff;
        color: #096dd9;
      }

      .xyMessageSuccess {
        background-color: #f6ffed;
        border: 1px solid #b7eb8f;
        color: #389e0d;
      }

      .xyMessageWarning {
        background-color: #fffbe6;
        border: 1px solid #ffe58f;
        color: #d48806;
      }

      .xyMessageError {
        background-color: #fff2f0;
        border: 1px solid #ffccc7;
        color: #cf1322;
      }

      /* 消息内容样式 */
      .xyMessageContent {
        display: inline-block;
        margin-right: 8px;
      }

      /* 关闭按钮样式 */
      .xyMessageClose {
        display: inline-block;
        width: 16px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.1);
        color: inherit;
        cursor: pointer;
        font-size: 12px;
        transition: background-color 0.3s;
      }

      .xyMessageClose:hover {
        background-color: rgba(0, 0, 0, 0.2);
      }
    `
    document.head.appendChild(style)
  }

  // 显示消息
  show(options) {
    const config = { ...defaultOptions, ...options }

    // 创建消息元素
    const messageEl = this.createMessageElement(config)

    // 添加到容器
    this.container.appendChild(messageEl)

    // 添加到队列
    this.queue.push({
      element: messageEl,
      config: config,
    })

    // 显示动画
    setTimeout(() => {
      messageEl.classList.add('xyMessageShow')
    }, 10)

    // 自动关闭
    if (config.duration > 0) {
      setTimeout(() => {
        this.close(messageEl, config)
      }, config.duration)
    }

    return {
      close: () => this.close(messageEl, config),
    }
  }

  // 创建消息元素
  createMessageElement(config) {
    const messageEl = document.createElement('div')
    messageEl.className = `xyMessage xyMessage${
      config.type.charAt(0).toUpperCase() + config.type.slice(1)
    }`

    // 设置位置类
    messageEl.classList.add(
      `xyMessage${
        config.position.charAt(0).toUpperCase() + config.position.slice(1)
      }`
    )

    // 消息内容
    const content = document.createElement('div')
    content.className = 'xyMessageContent'
    content.innerHTML = config.message
    messageEl.appendChild(content)

    // 关闭按钮
    if (config.showClose) {
      const closeBtn = document.createElement('span')
      closeBtn.className = 'xyMessageClose'
      closeBtn.innerHTML = '×'
      closeBtn.onclick = () => this.close(messageEl, config)
      messageEl.appendChild(closeBtn)
    }

    return messageEl
  }

  // 关闭消息
  close(messageEl, config) {
    if (!messageEl || !messageEl.parentNode) return

    // 隐藏动画
    messageEl.classList.remove('xyMessageShow')
    messageEl.classList.add('xyMessageHide')

    // 动画结束后移除元素
    setTimeout(() => {
      if (messageEl.parentNode) {
        messageEl.parentNode.removeChild(messageEl)
      }

      // 从队列中移除
      this.queue = this.queue.filter(item => item.element !== messageEl)

      // 执行关闭回调
      if (typeof config.onClose === 'function') {
        config.onClose()
      }
    }, 300)
  }

  // 关闭所有消息
  closeAll() {
    this.queue.forEach(item => {
      this.close(item.element, item.config)
    })
    this.queue = []
  }

  // 销毁实例
  destroy() {
    this.closeAll()
    if (this.container && this.container.parentNode) {
      this.container.parentNode.removeChild(this.container)
    }
    this.container = null
    messageInstance = null
  }
}

// 获取或创建 Message 实例
function getMessageInstance() {
  if (!messageInstance) {
    messageInstance = new MessageComponent()
  }
  return messageInstance
}

// 导出各种类型的消息方法
const Message = {
  // 基础消息
  show(options) {
    return getMessageInstance().show(options)
  },

  // 信息消息
  info(message, options = {}) {
    return this.show({ ...options, message, type: 'info' })
  },

  // 成功消息
  success(message, options = {}) {
    return this.show({ ...options, message, type: 'success' })
  },

  // 警告消息
  warning(message, options = {}) {
    return this.show({ ...options, message, type: 'warning' })
  },

  // 错误消息
  error(message, options = {}) {
    return this.show({ ...options, message, type: 'error' })
  },

  // 关闭所有消息
  closeAll() {
    if (messageInstance) {
      messageInstance.closeAll()
    }
  },

  // 销毁实例
  destroy() {
    if (messageInstance) {
      messageInstance.destroy()
    }
  },
}

// 安装到 Vue 原型
Message.install = function (Vue) {
  Vue.prototype.$message = Message
}

export default Message
